<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>js获取最近n小时，最近n天，最近n个月，最近n年，未来n天的时间数组，当月、上月、下月所有天数，当月、上月、下月的第一天和最后一天</title>

  <style>
    .btn_box {
      display: flex;
    }

    .btn_one {
      background-color: #ccc;
      padding: 2px 10px;
      margin-right: 10px;
      border-radius: 5px;
      cursor: pointer;
    }

    .btn_one:hover {
      background-color: #0078d4;
      color: #fff;
    }
  </style>
  <script src="../utils/index.js"></script>
</head>

<body>
  <div class="btn_box">
    <div class="btn_one" onClick="switchDate(1)">上个月</div>
    <div class="btn_one" onClick="switchDate(2)">当月</div>
    <div class="btn_one" onClick="switchDate(3)">下个月</div>
  </div>
  <script>
    let lastHours24 = getTheLastHours(new Date(), 24, 'yyyy-MM-dd HH时');
    console.log('获取最近24小时时间数组', lastHours24);
    // ['2024-03-25 09时', '2024-03-25 10时', '2024-03-25 11时', '2024-03-25 12时', '2024-03-25 13时', '2024-03-25 14时', '2024-03-25 15时', '2024-03-25 16时', '2024-03-25 17时', '2024-03-25 18时', '2024-03-25 19时', '2024-03-25 20时', '2024-03-25 21时', '2024-03-25 22时', '2024-03-25 23时', '2024-03-26 00时', '2024-03-26 01时', '2024-03-26 02时', '2024-03-26 03时', '2024-03-26 04时', '2024-03-26 05时', '2024-03-26 06时', '2024-03-26 07时', '2024-03-26 08时']

    let lastDays30 = getTheLastDays(new Date(), 30, 'yyyy-MM-dd');
    console.log('获取最近30天的时间数组:', lastDays30);
    // ['2024-02-25', '2024-02-26', '2024-02-27', '2024-02-28', '2024-02-29', '2024-03-01', '2024-03-02', '2024-03-03', '2024-03-04', '2024-03-05', '2024-03-06', '2024-03-07', '2024-03-08', '2024-03-09', '2024-03-10', '2024-03-11', '2024-03-12', '2024-03-13', '2024-03-14', '2024-03-15', '2024-03-16', '2024-03-17', '2024-03-18', '2024-03-19', '2024-03-20', '2024-03-21', '2024-03-22', '2024-03-23', '2024-03-24', '2024-03-25']

    let lastMonths12 = getTheLastMonths(new Date(), 12, 'yyyy-MM');
    console.log('获取最近12个月的时间数组:', lastMonths12);
    // ['2023-04', '2023-05', '2023-06', '2023-07', '2023-08', '2023-09', '2023-10', '2023-11', '2023-12', '2024-01', '2024-02', '2024-03']

    let lastYears5 = getTheLastYears(new Date(), 5, 'yyyy');
    console.log('获取最近5年的时间数组:', lastYears5);
    // ['2019', '2020', '2021', '2022', '2023']

    let nextDays7 = getNextDays(new Date(), 7, 'yyyy-MM-dd');
    console.log('获取未来7天的时间数组:', nextDays7);
    // ['2024-03-27', '2024-03-28', '2024-03-29', '2024-03-30', '2024-03-31', '2024-04-01', '2024-04-02']

    /**
      * JS 获取本月第一天和最后一天，获取上个月第一天和最后一天，获取下个月第一天和最后一天
      * 第三个参数 0和1的区别：
      * 1）0会转换为：第二个参数的最后一天；
      *    如new Date(2024, 1, 0) => 2024年01月31号
      * 2）1会转换为：第二个参数+1的第一天；
      *    如new Date(2024, 1, 1) => 2024年02月01号 
      **/
    // 示例：
    console.log(dateFtt('yyyy-MM-dd', new Date(2024, 1, 0)));  // 2024-01-31
    console.log(dateFtt('yyyy-MM-dd', new Date(2024, 1, 1)));  // 2024-02-01

    let currentDate = new Date();
    console.log('获取本月的第一天和最后一天:');
    console.log(dateFtt('yyyy-MM-dd', new Date(currentDate.getFullYear(), currentDate.getMonth(), 1)));  // 2024-03-01
    console.log(dateFtt('yyyy-MM-dd', new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0)));  // 2024-03-31
    console.log('获取上个月的第一天和最后一天:');
    console.log(dateFtt('yyyy-MM-dd', new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1)));  // 2024-02-01
    console.log(dateFtt('yyyy-MM-dd', new Date(currentDate.getFullYear(), currentDate.getMonth(), 0)));  // 2024-02-29
    console.log('获取下个月的第一天和最后一天:');
    console.log(dateFtt('yyyy-MM-dd', new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1)));  // 2024-04-01
    console.log(dateFtt('yyyy-MM-dd', new Date(currentDate.getFullYear(), currentDate.getMonth() + 2, 0)));  // 2024-04-30

    // let activeBtn = 1;
    // let currentSelectedDate;
    // let timeDate;

    // function switchDate(val) {
    //   console.log('切换时间按钮', val);
    //   activeBtn = val;

    //   let dateList = getDateList();
    //   console.log('当前点击月份天数', dateList);
    // }

    // // 获取某月所有天数数组
    // function getDateList() {
    //   let dateList = [];
    //   let myDate = new Date();
    //   let year = parseInt(myDate.getFullYear());
    //   let month = parseInt(myDate.getMonth());
    //   let year2 = year;
    //   let month2 = month;

    //   // 上个月
    //   if (activeBtn === 1) {
    //     if (timeDate == null) {
    //       year2 = year;
    //       month2 = month + 1;
    //     } else {
    //       let str = timeDate;
    //       let arr = str.substring(0, str.length - 1).split("年");
    //       year2 = parseInt(arr[0]);
    //       month2 = parseInt(arr[1]);
    //     }

    //     month2 = Math.abs(month2 - 1);

    //     if (month2 === 0) {
    //       year2 = year2 - 1;
    //       month2 = 12;
    //     }

    //     month2 = month2 < 10 ? "0" + month2 : month2;
    //   } else if (activeBtn === 2) {
    //     month2 = month2 + 1;
    //     month2 = month2 < 10 ? "0" + month2 : month2;
    //   } else if (activeBtn === 3) {
    //     // 下个月
    //     if (timeDate == null) {
    //       year2 = year;
    //       month2 = month;
    //     } else {
    //       let str = timeDate;
    //       let arr = str.substring(0, str.length - 1).split("年");
    //       year2 = parseInt(arr[0]);
    //       month2 = parseInt(arr[1]);
    //     }

    //     month2 = Math.abs(month2 + 1);

    //     if (month2 === 13) {
    //       year2 = year2 + 1;
    //       month2 = 1;
    //     }
    //     month2 = month2 < 10 ? "0" + month2 : month2;
    //   }

    //   console.log(year2, month2);
    //   let days = new Date(year2, month2, 0).getDate();

    //   for (let k = 1; k <= days; k++) {
    //     k = k < 10 ? "0" + k : k;
    //     let str = year2 + "-" + month2 + "-" + k;
    //     dateList.push(str);
    //   }

    //   let yearMonth = year2 + "-" + month2;
    //   timeDate = year2 + "年" + month2 + "月";

    //   console.log('当前日期：', timeDate, '天数：', days);

    //   return dateList;
    // }

  </script>
</body>

</html>